<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客系统个人列表页面</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/blog_list.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/common.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="./imag/logo.jpg" alt="博客图标">
        <span class="title">博客系统</span>
        <!-- 用于将图片 和 超链接分割开 -->
        <div class="splacer"></div>
        <a href="./blog_all_list.html">推荐文章</a>
        <a href="./blog_add.html">写文章</a>
        <!-- 注销是要从session中删除用户的信息 -->
        <a href="javascript:userdel()">注销</a>
    </div>
    <!-- 页面的主体部分 -->
    <div class="container">
        <div class="container-left">
            <!-- 主要包括头像，文章信息等 -->
            <div class="card">
                <!-- 头像 -->
                <img src="./imag/头像.png" alt="用户头像">
                <!-- 用户名 -->
                <h3 id="username"></h3>
                <a href="https://gitee.com/little-bit-tang-chen">gitee 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>专栏</span>
                </div>
                <div class="counter">
                    <span id="artCount"></span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <div id="artDiv" class="container-right">

        </div>
    </div>
</body>
<script>
    //将个人文章信息发送给后端  会自动发送sessionid，不需要再次发送个人信息给后端
    function myinfo() {
        jQuery.ajax({
            url: "/user/showinfo",
            type: "POST",
            data: {},
            success: function (result) {
                // 后端的data中包含了用户的整个信息
                if (result != null && result.code == 200) {
                    // 此时获取到用户的文章数量以及用户名成功
                    jQuery("#username").text(result.data.username);
                    jQuery("#artCount").text(result.data.artCount);
                } else {
                    alert("获取用户信息失败，请稍候尝试重新刷新下!");
                }
            }
        });
    }
    myinfo();

    // 修改个人的文章列表  前端不需要传入用户信息，存储在session中
    // 后端返回个人博客的列表 list
    function artInfo() {
        jQuery.ajax({
            url: "/art/artlist",
            type: "POST",
            data: {},
            success: function (result) {
                if (result != null && result.code == 200) {
                    // 此时以下有两种情况，该用户有文章和该用户无文章
                    if (result.data.length > 0) {
                        //此时该用户有文章发布的
                        let artListDiv = "";
                        for (let i = 0; i < result.data.length; i++) {
                            // 先获取到列表中的每一个数据
                            let artElem = result.data[i];
                            artListDiv += '<div class="blog">';
                            // 博客标题
                            artListDiv += '<div class="title">' + artElem.title + '</div>';
                            // 博客发表日期 
                            artListDiv += '<div class="date">' + artElem.updatetime + '</div>';
                            artListDiv += '<div class="desc"​>' + artElem.content + '</div>';
                            artListDiv += ' <div class="art">';
                            //  查看博客详情按钮 + 文章的id
                            artListDiv += '<a href="./blog_detailNo.html?id=' + artElem.id + '" class="detail">☞ 文章详情 ☜</a>&nbsp;&nbsp;&nbsp;';
                            artListDiv += ' <a href="./blog_edit.html?id=' + artElem.id + '" class="detail">✐ 修改文章 ✎</a>&nbsp;&nbsp;&nbsp;';
                            artListDiv += '<a href="javascript:artDel(' + artElem.id + ');" class="detail">↻ 删除文章 ↺</a>';
                            artListDiv += ' </div>';
                            artListDiv += '</div>';
                        }
                        jQuery("#artDiv").html(artListDiv);
                    } else {
                        //该用户无文章发布
                        jQuery("#artDiv").html("<div style='display: block; margin: 0 auto; width: fit-content;'> <h2>✌ 要记得坚持写博客哦! ✌</h2></div>");
                    }
                } else {
                    alert("获取文章列表失败，请稍候重新尝试刷新!");
                }
            }
        });
    }
    artInfo();

    // 实现删除该篇博客 要发送这篇博客的ID给后端
    function artDel(id) {
        if (confirm("确定要删除这篇博客吗？")) {
            jQuery.ajax({
                url: "/art/artdel",
                type: "POST",
                data: { "id": id },
                success: function (result) {
                    if (result != null && result.code == 200 && result.data == 1) {
                        // 去重新刷新一下页面
                        alert("成功删除这篇博客！");
                        location.href = location.href;
                    } else {
                        alert("删除博客失败，请重新刷新尝试删除！");
                    }
                }
            });
        }
    }

</script>

</html>